<template>
    <div class="attribute-text">
        <VTextAttr v-if="currentElementList[0].data"></VTextAttr>
        <div class="main-panel-content-wrap">
            <div class="row-1">
                <div class="main-text-tran-50">滚动时间</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="carousel.getMarqueeSpeedName()" type="number" class="mas-basis-input mas-basis-input2" @input="carousel.setMarqueeSpeed(currentElementList[0], JQuery('#' + carousel.getMarqueeSpeedName()).val(), false)" @change="history.addHistory(store.clone(), 120)" />
                    </div>
                </div>
            </div>
            <div class="row-1">
                <div class="main-text-tran-50">滚动方向</div>
                <div class="main-mas-input-simple">
                    <div class="label-icon cur-pointer" :class="{ 'select-background': currentElementList[0].attribute.direction === 'top' }">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">向上</div>
                            <img src="../../../image/main/text_position_l.svg" @click="carousel.setMarqueeDirection(currentElementList[0], 'top'); history.addHistory(store.clone(), 121)" />
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'select-background': currentElementList[0].attribute.direction === 'bottom' }">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">向下</div>
                            <img src="../../../image/main/text_position_c.svg" @click="carousel.setMarqueeDirection(currentElementList[0], 'bottom'); history.addHistory(store.clone(), 121)" />
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'select-background': currentElementList[0].attribute.direction === 'left' }">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">向左</div>
                            <img src="../../../image/main/text_position_r.svg" @click="carousel.setMarqueeDirection(currentElementList[0], 'left'); history.addHistory(store.clone(), 121)" />
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'select-background': currentElementList[0].attribute.direction === 'right' }">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">向右</div>
                            <img src="../../../image/main/text_position_r.svg" @click="carousel.setMarqueeDirection(currentElementList[0], 'right'); history.addHistory(store.clone(), 121)" />
                        </el-tooltip>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import carousel from '@/js/main/attribute/carousel.js';
import store from '@/js/store/state.js';
import history from '@/js/main/history.js';
import JQuery from 'jquery';

export default {
    data() {
        return {
            carousel: carousel,
            window: window,
            store: store,
            history: history,
            JQuery: JQuery,
            currentElementList: store.getCurrentElementList()
        };
    },
    mounted() {
        carousel.setAttribute(this.currentElementList[0]);
    },
    components: {
        VTextAttr: () => import('@/view/element/attribute/VTextAttr.vue')
    }
};
</script>

<style lang="scss" scoped>
.attribute-text {
    .row-1 {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
        grid-template-columns: 60px 1fr 30px;
    }
    .row-2 {
        height: 30px;
        display: grid;
        column-gap: 6px;
        grid-template-columns: 1fr 1fr 30px;
    }
    .mas-input-top {
        position: relative;
        top: -1px;
    }
    .cur-pointer {
        height: calc(100% - 6px);
        border-radius: 6px;
        &:hover {
            background-color: #ffffff26;
        }
        cursor: pointer;
    }
    .select-background {
        background-color: #ffffff26;
    }
    .text-input-c {
        background-color: #ffffff0f;
        border-radius: 6px;
        margin-right: 36px;
    }
    .bg-no {
        background: none;
    }
}
</style>